<template>
	<view class="auth">
		<view class="infos">
			<view class="list">
				<text>姓名</text>
				<input placeholder="请输入您的姓名"
					placeholderStyle="font-size: 28rpx;color: #999999;line-height: 40rpx;font-family: PingFangSC-Regular;"
					border="surround" v-model="req.realName" type="text"></input>
			</view>
			<view class="list">
				<text>年龄</text>
				<input placeholder="请输入您的年龄"
					placeholderStyle="font-size: 28rpx;color: #999999;line-height: 40rpx;font-family: PingFangSC-Regular;"
					border="surround" v-model="req.age" type="number"></input>
			</view>
			<view class="list">
				<text>性别</text>
				<view class="_position" @click="showSex = true"></view>
				<input placeholder="请选择您的性别" border="surround" v-model="req.gender" type="text" disabled
					placeholder-style="pointer-events:none;font-size: 28rpx;color: #999999;line-height: 40rpx;font-family: PingFangSC-Regular;"></input>
			</view>
			<view class="list">
				<text>手机号</text>
				<input placeholder="请输入您的手机号"
					placeholderStyle="font-size: 28rpx;color: #999999;line-height: 40rpx;font-family: PingFangSC-Regular;"
					border="surround" v-model="req.phone" type="number"></input>
			</view>
			<view class="list">
				<text>所在地区</text>
				<view class="_position" @click="visible = true"></view>
				<input placeholder="请选择您的所在地区" border="surround" v-model="req.address" type="text" disabled
					placeholder-style="pointer-events:none;font-size: 28rpx;color: #999999;line-height: 40rpx;font-family: PingFangSC-Regular;"></input>
			</view>
			<view class="list">
				<text>头像</text>
				<view class="upload">
					<u-upload :fileList="fileList1" multiple :maxCount="1" name="1" :action="action"
						:form-data="formData" @on-success="handleSuccess" @on-error="handleError" @afterRead="afterRead"
						@delete="deletePic">
						<image src="../../../static/mine_page/upload.png"></image>
					</u-upload>
					<text>请保证上传头像清晰</text>
				</view>
			</view>
			<view class="list">
				<text>身份证国徽面</text>
				<view class="upload">
					<u-upload :fileList="fileList2" multiple :maxCount="1" name="2" :action="action"
						:form-data="formData" @on-success="handleSuccess" @on-error="handleError" @afterRead="afterRead"
						@delete="deletePic">
						<image src="../../../static/mine_page/upload.png"></image>
					</u-upload>
					<text>请保证身份证国徽面完整和清晰</text>
				</view>
			</view>
			<view class="list">
				<text>身份证头像面</text>
				<view class="upload">
					<u-upload :fileList="fileList3" multiple :maxCount="1" name="3" :action="action"
						:form-data="formData" @on-success="handleSuccess" @on-error="handleError" @afterRead="afterRead"
						@delete="deletePic">
						<image src="../../../static/mine_page/upload.png"></image>
					</u-upload>
					<text>请保证身份证头像面完整和身份证号清晰</text>
				</view>
			</view>
			<view class="list">
				<text>身份证号</text>
				<input placeholder="请输入您的身份证号"
					placeholderStyle="font-size: 28rpx;color: #999999;line-height: 40rpx;font-family: PingFangSC-Regular;"
					border="surround" v-model="req.idNumber" type="number"></input>
			</view>
			<view class="list">
				<text>本人生活照（最多只能上传6张）</text>
				<view class="upload_new">
					<u-upload :fileList="fileList4" multiple :maxCount="6" name="4" :action="action"
						:form-data="formData" @on-success="handleSuccess" @on-error="handleError" @afterRead="afterRead"
						@delete="deletePic">
						<image src="../../../static/mine_page/upload_image.png"></image>
					</u-upload>
				</view>
			</view>
			<view class="list">
				<text>个人介绍</text>
				<input placeholder="请输入您的个人介绍"
					placeholderStyle="font-size: 28rpx;color: #999999;line-height: 40rpx;font-family: PingFangSC-Regular;"
					border="surround" v-model="req.personalIntro" type="text"></input>
			</view>
			<!-- <view class="list">
				<text>语音介绍（长按后弹出录音弹窗，松手完成录音，手指向上滑动可取消）</text>
				<view class="tags_flex">
					<all-speech @startRecord="start" @endRecord="end" @cancelRecord="cancel"></all-speech>
				</view>
			</view> -->
			<view class="list">
				<text>兴趣爱好</text>
				<view class="tags_flex">
					<block v-for="(item,index) in tag" :key="index">
						<u-tag :text="item.tag" type="warning" shape="circle" v-if="item.isShow === true"
							@click="ItemTag(item,index)"></u-tag>
						<u-tag :text="item.tag" type="warning" shape="circle" plain v-if="item.isShow === false"
							@click="ItemTag(item,index)"></u-tag>
					</block>
				</view>
			</view>
			<view class="button" @click="save">
				<text>提交</text>
			</view>
			<!-- <view class="text">
				<text>根据监管要求身份证照片仅用于实名认证</text>
			</view> -->
		</view>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
			@close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
			@confirm="PickerConfirm" @cancel="visible = false" :visible="visible" />
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		uploadToQiniu
	} from '@/utils/qiniu';
	import {
		apply,
		gettags
	} from '@/api/user';
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				column: 3,
				defaultValue: '',
				maskCloseAble: true,
				action: 'http://ciyuanbanyou.cn', //七牛云上传api
				showSex: false,
				visible: false,
				formData: {},
				fileList1: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],
				tag: [],
				actions: [{
						name: '男',
					},
					{
						name: '女',
					}
				],
				req: {
					avatar: '', //头像
					realName: '', // 必填 名字
					phone: '', //手机号码
					age: '', // 必填 18-30 年龄
					address: '', //所在地区
					gender: '', // 必填 male/female 性别 男male 女female
					idNumber: '', // 必填身份证号
					idCardFront: '', // 身份证正面
					idCardBack: '', // 身份证反面
					lifePhotos: [], //生活照
					voiceUrl: '', // 语音URL
					tag: [], // 兴趣爱好标签（秒）
					personalIntro: '' // 500字以内 个人介绍
				}
			}
		},
		onLoad() {
			this.gettags();
		},
		methods: {
			// 开始录音
			start() {
				console.log('开始录音');
			},
			// 结束录音并处理得到的录音文件
			// event中，app端仅有tempFilePath字段，微信小程序还有duration和fileSize两个字段
			end(event) {
				console.log(event);
			},
			// 用户取消录音
			cancel() {
				console.log('取消录音');
			},
			sexSelect(e) {
				this.req.gender = e.name
				this.showSex = false;
			},
			ItemTag(item, index) {
				this.$set(this.tag[index], 'isShow', this.tag[index].isShow = !this.tag[index].isShow);
			},
			//选择的省市区
			PickerConfirm(e) {
				this.req = {
					...this.req,
					...{
						address: e.name || ''
					}
				};
				this.visible = false;
			},
			/** 
			@method 获取tag标签列表
			**/
			async gettags() {
				try {
					this.tag = [];
					const res = await gettags({
						page: 1,
						pageSize: 20,
					});

					if (res.code === 200) {
						for (var i = 0, len = res.data.data.length; i < len; i++) {
							this.tag.push({
								tag: res.data.data[i].tag,
								url: res.data.data[i].url,
								isShow: false,
							});
						}
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			/** 
			@method 搭子入驻
			**/
			async save() {
				try {
					this.req = {
						...this.req,
						...{
							tag: this.tag.filter((v) => v.isShow === true),
							avatar: this.fileList1.length > 0 ? this.getImageUrl(this.fileList1)[0] : '',
							idCardFront: this.fileList2.length > 0 ? this.getImageUrl(this.fileList2)[0] : '',
							idCardBack: this.fileList3.length > 0 ? this.getImageUrl(this.fileList3)[0] : '',
							lifePhotos: this.getImageUrl(this.fileList4),
						}
					};

					const res = await apply(this.req);

					if (res.code === 200) {
						this.$refs.uToast.show({
							type: "default",
							title: "默认主题",
							message: "入驻信息提交成功，请等待审核结果！",
							iconUrl: "https://uviewui.com/demo/toast/default.png",
							complete() {
								uni.reLaunch({
									url: '/pages/tabBar/Mine/index'
								});
							},
						});
					}
				} catch (err) {
					console.log(err);
				}
			},
			//图片解析
			getImageUrl(imgs) {
				var urls = new Array();
				for (var i = 0, len = imgs.length; i < len; i++) {
					urls.push(imgs[i].url);
				}
				return urls || [];
			},
			// 新增图片
			async afterRead(event) {
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "http://120.79.170.227:5000/api/public/upload", //七牛云上传接口
						filePath: url,
						name: "file",
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data.url);
							}, 1000);
						},
					});
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 成功处理
			handleSuccess(file, response) {
				uni.showToast({
					title: `${file.name} 上传成功`
				});
			},
			// 失败处理
			handleError(file, error) {
				uni.showToast({
					title: `${file.name} 上传失败: ${error.message}`,
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.auth {
		height: 100%;
		padding-bottom: 30rpx;
		background-color: #FFFFFF;

		& text {
			font-family: PingFangSC-Regular, PingFang SC;
			color: #7C7597;
		}

		.infos {
			.list {
				display: flex;
				flex-direction: column;
				padding: 30rpx 30rpx 0rpx 30rpx;
				position: relative;

				._position {
					width: 90%;
					height: 80rpx;
					position: absolute;
					background-color: transparent;
					bottom: 0rpx;
					z-index: 9999;
				}

				.tags_flex {
					width:95%;
					margin:0rpx auto;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					
					/deep/ .u-tag-wrapper {
						margin-right: 15rpx;
						margin-bottom:15rpx;
					}
				}

				>text {
					font-size: 30rpx;
					font-weight: 600;
					color: #160651;
					line-height: 40rpx;
					margin-bottom: 14rpx;
				}

				>input {
					height: 80rpx;
					background: #F5F5FB;
					border-radius: 10rpx;
					padding-left: 32rpx;
				}

				.upload_new {
					width: auto;
					display: flex;
					align-items: center;
					// background: #F5F5FB;
					border-radius: 10rpx;
					padding: 0rpx 10rpx 10rpx 0rpx;

					// /deep/ .u-upload__wrap{
					// 	display: flex;
					// 	align-items: center;
					// }

					& image {
						width: 155rpx;
						height: 150rpx;
						// border:1px solid red;

					}

					>text {
						margin-top: 38rpx;
					}
				}

				.upload {
					display: flex;
					flex-direction: column;
					align-items: center;
					background: #F5F5FB;
					border-radius: 10rpx;
					padding: 50rpx 50rpx 30rpx 50rpx;

					& image {
						width: 488rpx;
						height: 264rpx;
					}

					>text {
						margin-top: 38rpx;
						letter-spacing: 2rpx;
					}
				}
			}
		}

		.button {
			width: 85%;
			display: flex;
			padding: 0rpx 0rpx 0rpx 0rpx;
			margin: 0rpx auto;
			margin-top: 50rpx;

			>text {
				width: 100%;
				height: 84rpx;
				background: #ffaf32;
				box-shadow: 0rpx 6rpx 30rpx 0rpx rgba(83, 60, 215, 0.4600);
				border-radius: 43rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 84rpx;
				text-align: center;
			}
		}

		.text {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 10rpx;
		}
	}
</style>